<template>
  <view class="cc-popup-container" @touchmove.prevent.stop>
    <view class="popup-mask" :style="is_Show ? 'opacity: 0.4;height: 100vh;' : ''" :class="mask_H"
      @click="onClickModel">
    </view>
    <view class="pop-in">
      <view class="pop-box"
        :style="{transform: is_Show ? 'translateY(0)' : 'translateY(100%)', height: is_Show ? '100%' : '', 'border-bottom' : bangs_Height ? `${bangs_Height}px solid #FFF` : 'none'}">
        <slot></slot>
        <view class="disabled-mask" v-show="is_Disable"></view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapState
  } from "vuex";
  export default {
    name: "cc-popup",
    props: {
      show: {
        type: Boolean,
        default: false
      },
      // 弹出层是否可以连贯切换
      constant: {
        type: Boolean,
        default: false
      }
    },
    emits: ['click-model'],
    watch: {
      show: function(newVal) {
        if (newVal) {
          if (this.constant || this.flag) {
            this.mask_H = ''
            this.is_Show = true
            this.flag = false
            setTimeout(() => {
              this.flag = true;
              if (this.constant === false) {
                this.is_Disable = false
              }
            }, 400)
          }
        }
        if (!newVal) {
          if (this.constant || this.flag) {
            this.is_Show = false
            if (this.constant === false) {
              this.is_Disable = true
            }
            setTimeout(() => {
              this.mask_H = "m-h"
            }, 400)
          }
        }
      }
    },
    computed: {
      ...mapState("m_app", ["bangs_Height"])
    },
    data() {
      return {
        flag: true,
        is_Show: this.show,
        is_Disable: !this.constant,
        mask_H: 'm-h'
      }
    },
    methods: {
      onClickModel() {
        if (this.constant || this.flag) {
          this.$emit("click-model")
        }
      }
    }
  }
</script>

<style lang="scss">
  .cc-popup-container {
    position: absolute;
    bottom: 0;
    width: 100%;

    .popup-mask {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: #000000;
      z-index: 10000;
      transition: opacity 0.4s ease;
      opacity: 0;
    }

    .m-h {
      height: 0 !important;
    }

    .pop-in {
      position: fixed;
      bottom: 0;
      width: 100%;
      z-index: 10001;

      .pop-box {
        overflow: hidden;
        position: relative;
        height: 0;
        transition: all 0.4s ease;
        transform: translateY(100%);
      }

      .disabled-mask {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
      }
    }

  }
</style>